@charset 'utf-8';
@import'reset';

body{
    background: #f6f6f6;
    width: 100%;
    .con_left{
        position: fixed;
        left: 0;
        top: 0;
        width: 247px;
        height: 100%;
        display: flex;
        flex-direction: column;
    .l-box{
        dl{
            dt{
                font-weight: bold;
                letter-spacing: 3px;
                font-size: 16px;
                color: #008b98;
                margin-bottom: 10px;
                img{
                    vertical-align: middle;
                    padding-right: 10px;
                }
            }
            dd{
                line-height: 20px;
                &:hover{
                    background: rgba(43,115,132,.7);
                }
            }
            a{
                font-size: 12px;
                color: white;
            }
        }
        .in{
            background: rgba(43,115,132,.7);
        }
        &:hover{
            background: #333;
        }
    }
    .in{
        border-right: 4px solid #00828e;
        width: 251px;
        background: #333;
    }
    div{
        width: 100%;
        text-align: center;
        height: 272.5px;
        background: #434343;
        font-size: 14px;
        color:#fff; 
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

        .main_content{
            height: 100%;
            position: relative;
            
            .con_right{
                margin-left: 30px;
                margin-top: 45px;
                position: absolute;
                right: 0;
                top: 0;
                left: 247px;
                bottom: 0;
                .r_main{
                    width: 99.99%;
                    padding: 0 5px;
                    height: 100%;
                }
            }
        }
    
}
